<template>
  <div class="detail-swiper">
    <swiper ref="mySwiper" :options="swiperOptions" v-if="topImages.length > 0">
      <swiper-slide v-for="(item, index) in topImages" :key="index"><img :src="item.src" class="swiper-img"></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  export default {
    name: "DetailSwiper",
    data() {
      return {
        swiperOptions: {
          loop: true,
          speed: 500,
          autoplay:{
            delay: 2000,
            stopOnLastSlide: false,
            /* 触摸滑动后是否继续轮播 */
            disableOnInteraction: false
          },
          pagination: {

            el: '.swiper-pagination',

          }
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    props: {
      topImages: {
        type: Array,
        default() {
          return []
        }
      }
    }
  }
</script>

<style scoped>
  .swiper-img{
    width: 100%;
    height: 300px;
  }
</style>
